<template>
  <div style="text-align: left" v-loading="loading">
    <div style="margin-top:10px;">
      <el-select v-model="depno" style="width: 200px;" placeholder="请选择相关部门" size="mini" @change="depnoChange"
                 filterable clearable>
        <el-option
          v-for="item in deptNameData"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="projectNumber" style="width: 200px;" placeholder="请选择相关项目名" size="mini"
                 @change="projectChange" filterable clearable>
        <el-option
          v-for="item in projectData"
          :key="item.project_number"
          :label="item.project_name"
          :value="item.project_number">
        </el-option>
      </el-select>
      <el-date-picker
        size="mini"
        v-model="overtime_all_time"
        type="daterange"
        style="width:300px"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changTime"
        align="center">
      </el-date-picker>
      <el-select v-model="positionid" style="width: 200px;" placeholder="请选择相关职位" size="mini" @change="positionChange"
                 filterable clearable allow-create multiple>
        <el-option
          v-for="item in positionData"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-tabs v-model="defaultTab" style="margin-top:5px;">
        <el-tab-pane label="报销单信息" name="expense">
          <h1 style="text-align:center">报销单信息</h1>
          <el-table
            ref="multipleTable"
            :data="tabData"
            size="mini"
            stripe
            border
            @selection-change="handleSelectionChange"
            style="width: 91%;margin:auto;">
            <el-table-column
              type="selection"
              width="40"
              align="left">
            </el-table-column>
            <el-table-column
              prop="expense_id"
              label="报销单ID"
              width="100"
              align="center"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              prop="application_date"
              label="报销单日期"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="date_type"
              label="日期类型"
              width="100"
              align="center"
              :formatter="formatterDateType"
            >
            </el-table-column>
            <el-table-column
              prop="application_id"
              label="申请表ID"
              width="100"
              align="center"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              prop="username"
              width="100"
              label="报销人员"
              align="center">
            </el-table-column>
            <el-table-column
              prop="create_user"
              width="100"
              label="创建人员"
              align="center">
            </el-table-column>
            <el-table-column
              prop="project_name"
              label="项目名称"
              show-overflow-tooltip
              width="170"
              align="center">
            </el-table-column>
            <el-table-column
              prop="auditor"
              width="100"
              label="审核人"
              align="center">
            </el-table-column>


            <el-table-column
              prop="audit_status"
              label="审核状态"
              width="100"
              align="center"
              :formatter="fnMatterAuditStatus">
            </el-table-column>
            <el-table-column
              prop="fee"
              label="报销总金额"
              width="80"
              align="center">
            </el-table-column>

            <el-table-column
              prop="expense_cause"
              width="150"
              label="事由"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="audit_comments"
              label="审核意见"
              v-if="false"
              width="170"
              align="center">
            </el-table-column>

            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  @click="prepareEdit(scope.$index, scope.row)"

                >编辑
                </el-button>
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="deleteEx(scope.$index, scope.row)"

                >删除
                </el-button>
              </template>
            </el-table-column>

            <el-table-column
              prop="expense_type"
              label="报销类别标记"
              width="120"
              align="center"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              prop="expense_status"
              label="报销标记"
              width="90"
              align="center"
              v-if="false">
            </el-table-column>
          </el-table>
          <div style="text-align: left;margin-top: 10px">

            <el-button type="primary" size="mini" @click="toAdd" icon="icon-add">新增</el-button>

            <el-pagination background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[30, 50, 100, 200]"
                           :page-size="pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total.length">
            </el-pagination>
            <!-- <el-button size="mini" type="primary" icon="document" @click="handleDownload1">导出项目明细</el-button>
            <el-button size="mini" type="primary" icon="document" @click="handleDownload2">导出加班报销金额统计</el-button> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div id="show-list" style="margin-top: 10px;text-align:center">
      <el-dialog title="报销单申请表"
                 :visible.sync="dialogVisible"
                 width="50%"
                 :before-close="handleClose"
                 v-loading="operate_loading"
                 @close="closeDialog">
        <el-form :model="editForm" label-width="300px" ref="editForm" >
          <div v-show="this.editForm.expense_id==''">
            <span style="color:red">*</span> <span style="margin-left:14px;">申请人</span>
            <el-select v-model="exApl1" multiple style="width: 540px" placeholder="请选择申请人" size="mini" filterable @change="exAplselectChange">
              <el-option
                v-for="item in aplData"
                :key="item.application_id"
                :label="item.lable"
                :value="item.application_id">
              </el-option>
            </el-select>
          </div>
          <div v-show="this.editForm.expense_id!=''">
            <span style="color:red">*</span> <span style="margin-left:14px;">申请人</span>
            <el-select v-model="exApl" style="width: 540px" disabled placeholder="请选择申请人" size="mini">
              <el-option
                v-for="item in aplData1"
                :key="item.application_id"
                :label="item.lable"
                :value="item.application_id">
              </el-option>
            </el-select>
          </div>
          <div style="margin-top:5px;">
            <div style="margin-top:5px;">
              <span style="color:red;">*</span> <span>项目名称</span>
              <el-select v-model="pId" style="width: 540px" placeholder="请选择项目名称.." size="mini">
                <el-option
                  v-for="item in pIdData"
                  :key="item.project_id"
                  :label="item.project_name"
                  :value="item.project_id">
                </el-option>
              </el-select>
            </div>
          </div>

          <div>
              <div style="margin-top:5px;" v-if="this.editForm.expense_id!=''">
                <span style="color:red;">*</span> <span>加班类型</span>
                <el-select v-model="date_type" style="width:540px" size="mini">
                  <el-option
                    v-for="item in dateTypeData"
                    :key="item.type_id"
                    :label="item.type_lable"
                    :value="item.type_id"></el-option>
                </el-select>
              </div>
            <div v-if="editForm.expense_id!=''">
              <div style="margin-top:5px;">
                <span style="margin-left:10px;">餐费报销</span>
                <el-tooltip class="item" effect="dark" content="小数点后只可有一位哦~" placement="bottom">
                  <el-input-number size="mini" v-model="eatMoney" style="width: 540px;" :min="0" :max="9999.9"
                                  :precision="1"></el-input-number>
                </el-tooltip>
              </div>
              <div style="margin-top:5px;">
                <span style="margin-left:10px;">路费报销</span>
                <el-tooltip class="item" effect="dark" content="小数点后只可有一位哦~" placement="bottom">
                  <el-input-number size="mini" v-model="trafficMoney" style="width: 540px;" :min="0" :max="9999.9"
                                  :precision="1" ></el-input-number>
                </el-tooltip>
              </div>
              <div style="margin-top:5px;">
                <span style="margin-left:10px;">补助报销</span>
                <el-tooltip class="item" effect="dark" content="小数点后只可有一位哦~" placement="bottom">
                  <el-input-number size="mini" v-model="extraMoney" style="width: 540px;" :min="0" :max="9999.9"
                                  :precision="1"></el-input-number>
                </el-tooltip>
              </div>
              <div style="margin-top:5px;">
                <span style="margin-left:10px;">其他报销</span>
                <el-tooltip class="item" effect="dark" content="小数点后只可有一位哦~" placement="bottom">
                  <el-input-number size="mini" v-model="elseMoney" style="width: 540px;" :min="0" :max="9999.9"
                                  :precision="1"></el-input-number>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div style="margin-top:5px;">
            <span style="color:red;">*</span> <span style="margin-left:25px;">事 由</span>
            <el-input size="mini" style="width: 540px;" v-model="exCause" placeholder="请输入事由..."
            ></el-input>
          </div>

          <div style="margin-top:5px;">
            <span style="color:red;">*</span> <span style="margin-left:1px;">相关人员</span>
            <el-input size="mini" style="width: 540px;" v-model="exUser" placeholder="请输入相关人员..."
            ></el-input>
          </div>

          <!--<div style="margin-top:5px;" v-if="auditstatu==0&&isAuditor">-->
          <!--<span style="margin-left:14px;">审核意见</span>-->
          <!--<el-input size="mini" style="width: 540px;" v-model="exComm" placeholder="请输入审核意见..."-->
          <!--&gt;</el-input>-->
          <!--</div>-->
          <!--<div style="margin-top:5px;" v-if="auditstatu!=0">-->
          <!--<span style="margin-left:14px;">审核意见</span>-->
          <!--<el-input size="mini" style="width: 540px;" v-model="exComm" placeholder="请输入审核意见..." readonly-->
          <!--&gt;</el-input>-->
          <!--</div>-->

          <div style="margin-top:5px;">
            <span style="color:red;">*</span> <span style="margin-left:15px;">制表人</span>
            <el-input v-model="userName" style="width: 540px" size="mini" readonly>
            </el-input>
          </div>

          <div style="margin:30px;display:none;">
            <el-form-item label="报销单ID:">
              <el-input size="mini" style="width: 100px;" v-model="editForm.expense_id"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align:center">
         <el-button type="danger" @click="cancel" style="width:90px;">取 消</el-button>
         <el-button type="warning" v-if="this.editForm.expense_id==''" @click="resetDialog">重置</el-button>
         <el-button type="primary" @click="addExpense" id="addbtn" v-if="!this.editForm.expense_id!=''">新增</el-button>
    <el-button type="primary"
               @click="handleEdit"
               id="editbtn" v-if="this.editForm.expense_id!=''">
    确认</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="项目费用明细单"
                 :visible.sync="dialogVisible1"
                 width="40%" float="left">
      </el-dialog>
    </div>
    <div style="margin-top:10px;">
      <el-dialog title="加班报销统计金额"
                 :visible.sync="dialogVisible2"
                 width="80%" float="left">

      </el-dialog>

    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        positionid:[],//职位id
        positionData:[],//职位列表
        loading: false,
        deptNameData: [],
        projectData: [],
        isAuditor: false,
        tabData: [],
        depno: 94,
        projectName: "",
        projectNumber: "",
        project_id:'89019',
        starttime: "",
        endtime: "",
        overtime_all_time: "",
        aplData: [],
        aplData1: [],
        pIdData: [],
        userName: "",
        userNameData: "",
        operate_loading: false,
        things:'',
        days:0,
        pId: "",
        exApl: "",
        exApl1: [],
        exUser: "",
        eatMoney: "",
        extraMoney: "",
        elseMoney: "",
        trafficMoney: "",
        exCause: "",
        expense_ids:[],
        editForm: {
          expense_id: ""
        },

        downloadLoading: false,
        auditstatu: "",
        defaultTab: "expense",
        detailTabData: [],
        name: "",
        depno1: 94,
        exCreatedUser: "",
        tableData1: [],
        tableBottomData: [],
        dialogVisible: false,
        aduData: [],
        stuData: [],
        exTypeData: [],
        dialogEditData: [],
        dialogVisible1: false,
        dialogVisible2: false,
        total: "",
        exDep: "",
        keywords: "",
        pagesize: 30,
        currentPage: 1,
        exAplNumber: 0,
        exAdu: "",
        exStu: "",
        exType: "",
        exMoney: "",
        exComm: "",
        created_user: "",
        multipleSelection: [],

        deptName: "",
        date_type:'',
        dateTypeData:[
          {type_id:'1',type_lable:'工作日加班'},
          {type_id:'2',type_lable:'周末加班'},
          {type_id:'3',type_lable:'法定节假日加班加班'}
        ]

      };
    },
    mounted: function () {
      this.loadDeptNameData();
      this.isAuditorFunc();
      this.loadTime();

      this.loadDialogApplicationIdData();
      this.loadDialogProIdData();
      this.getLoginUserName();


      this.loadDialogAduData();

      this.loadDialogApplicationIdData1();
      this.loadDialogExStuData();

      this.loadDialogTypeData();
      this.loadPositionData();

    },
    methods: {
        //获取职位数据
      loadPositionData(){
        var _this = this;
        this.getRequest("/expense/getPosition").then(resp=>{
            if(resp&&resp.status==200){
                _this.positionData=resp.data;
            }
        })
      },
      toAdd(){
        this.exApl1=[];
        this.dialogVisible=true;
        console.log(this.editForm.expense_id)

      },
      loadDeptNameData() {
        this.userName=this.$store.state.user.name
        var _this = this;
        this.loading = true;
        this.getRequest("/expense/manage/deptid").then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.deptNameData = resp.data;
          }
          this.depnoChange(94)
        });
      },
      loadTime() {
        this.overtime_all_time = [
          this.createdTimeFormart2(new Date()),
          this.createdTimeFormart1(new Date())
        ];
        this.starttime = this.createdTimeFormart(this.overtime_all_time[0]);
        this.endtime = this.createdTimeFormart(this.overtime_all_time[1]);
        this.loadTableData();
      },
      //新增选择申请人事件
      exAplselectChange(val){
        let obj=[]
        for(let i=0;i<val.length;i++){
          obj.push(
            this.aplData.find((item)=>{
              return item.application_id==val[i]
            })
          )
        }
//        obj = this.aplData.find((item)=>{
//          return item.application_id==val
//        })
        let money=0
        for(let i=0;i<obj.length;i++){
          var date = obj[i].lable.split("申请时间:")[1]
          if(new Date(date).getDay()==6||new Date(date).getDay()==0){
            money+=100;
          }else{
            money+=20;
          }
        }
        this.extraMoney=money

      },
      //码值转换
      formatterDateType(row,column){
          if(row.date_type == 1){
                return "工作日加班";
            }else if(row.date_type == 2){
                return "周末加班";
            }else if(row.date_type == 3){
                return "法定节假日加班";
            }
      },
      /* 获取当前登录人名并作为制表人、以及（新增页面中的）创建者放入页面*/
      getLoginUserName() {
        this.postRequest("/expense/getloginuser").then(resp => {
          var _this = this;
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.userNameData = resp.data.userName;
          }
        });
      },

      isAuditorFunc() {
        this.getRequest("/expense/isAuditor").then(resp => {
          if (resp && resp.status == 200) {
            this.isAuditor = resp.data;
          }
        });
      },
      /* 分页加载数据 */
      loadTableData() {
        var _this = this;
        this.loading = true;
        this.postRequest("/expense/control", {
          project_id:this.project_id,
          start_time:this.starttime,
          end_time:this.endtime,
          position_id:this.positionid,
        }).then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.total = resp.data;
            _this.tabData = resp.data.slice(
              (_this.currentPage - 1) * _this.pagesize,
              _this.currentPage * _this.pagesize
            );
          }
        });
      },


      //显示数据量变更
      handleSizeChange(data) {
        this.pagesize = data;
        this.tabData = this.total.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
        this.loadTableData();
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.tabData = this.total.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
        this.loadTableData();
      },

      handleSelectionChange(val) {
        this.expense_ids=[]
        this.multipleSelection = val;
        this.multipleSelection.forEach(item=>{
          this.expense_ids.push(item.expense_id)
        })
      },

      /* 新增报销单 */
      addExpense() {
        var _this = this;
        // if (
        //   this.trafficMoney === 0 &&
        //   this.eatMoney === 0 &&
        //   this.elseMoney === 0 &&
        //   this.extraMoney === 0
        // ) {
        //   this.$message.warning("报销金额不能全部为空!");
        //   return;
        // }
        // if (
        //   !this.isNotNullORBlank(this.eatMoney) ||
        //   !this.isNotNullORBlank(this.trafficMoney) ||
        //   !this.isNotNullORBlank(this.elseMoney) ||
        //   !this.isNotNullORBlank(this.extraMoney)
        // ) {
        //   this.$message.warning("报销金额不能为空值哦!");
        //   return;
        // }
        if (!this.isNotNullORBlank(this.exApl1)) {
          this.$message.warning("申请表ID不能为空!");
          return;
        }
        if (!this.isNotNullORBlank(this.pId)) {
          this.$message.warning("项目名称不能为空!");
          return;
        }
        this.operate_loading = true;
        console.log(this.exApl)

        this.postRequest("/expense/manage/addex", {
          application_ids: this.exApl1,
          project_id: this.pId,
          expense_cause: this.exCause,
          user_relate: this.exUser,
          create_user: this.$store.state.user.id,
          eat_money: this.eatMoney,
          traffic_money: this.trafficMoney,
          extra_money: this.extraMoney,
          else_money: this.elseMoney,
          days:this.days,
          audit_status:'1',
        }).then(resp => {
          this.operate_loading = false;
          this.dialogVisible = false;
          if (resp && resp.status == 200) {
            var addData = resp.data;
            _this.$message({type: addData.status, message: "添加成功!"});
            this.clearForm();
            this.loadTableData();
            this.loadDialogApplicationIdData();
          }
        });
      },
      //清除form
      clearForm() {
          (this.exAplNumber = 0),
          (this.exAdu = ""),
          (this.exMoney = ""),
          (this.exStu = ""),
          (this.exType = ""),
          (this.exComm = ""),
          (this.editForm.expense_id = ""),
          (this.pId = ""),
          (this.exCreatedUser = ""),
          (this.exUser = ""),
          (this.exCause = ""),
          (this.eatMoney = ""),
          (this.trafficMoney = ""),
          (this.extraMoney = ""),
          (this.elseMoney = "");
      },

      /* 获取弹框中申请表相关 */
      loadDialogApplicationIdData() {
        var _this = this;
        this.getRequest("/expense/manage/dialogappli").then(resp => {
          if (resp && resp.status == 200) {
            _this.aplData = resp.data;

          }
        });
      },
      loadDialogApplicationIdData1() {
        var _this = this;
        this.getRequest("/expense/manage/dialogappli1").then(resp => {
          if (resp && resp.status == 200) {
            _this.aplData1 = resp.data;

          }
        });
      },
      /* 项目选项 */
      loadDialogProIdData() {
        var _this = this;
        this.exAplNumber = this.exApl;
        this.getRequest("/expense/manage/dialogproid").then(resp => {
          if (resp && resp.status == 200) {
            _this.pIdData = resp.data;
//            this.projectNumber = "JY17MEFZ005BZ";
          }
        });
      },
      /* 报销状态 */
      loadDialogExStuData() {
        var _this = this;
        this.loading = true;
        this.getRequest("/expense/manage/exstu").then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.stuData = resp.data;
          }
        });
      },

      /* 获取审核人名称 */
      loadDialogAduData() {
        var _this = this;
        this.loading = true;
        this.getRequest("/expense/manage/aduname").then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.aduData = resp.data;
          }
        });
      },
      /* 获取报销类型 */
      loadDialogTypeData() {
        var _this = this;
        this.loading = true;
        this.getRequest("/expense/manage/extype").then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.exTypeData = resp.data;
          }
        });
      },
      /* 点击清空弹窗数据 */
      resetDialog() {
        this.dialogVisible = true;
        (this.exApl1 = []),
          (this.exApl=""),
          (this.exAplNumber = 0),
          (this.exAdu = ""),
          (this.exMoney = ""),
          (this.exStu = ""),
          (this.exType = ""),
          (this.exComm = ""),
          (this.editForm.expense_id = ""),
          (this.pId = ""),
          (this.exCreatedUser = ""),
          (this.exUser = ""),
          (this.exCause = ""),
          (this.eatMoney = ""),
          (this.trafficMoney = ""),
          (this.extraMoney = ""),
          (this.elseMoney = "");
      },
      /* 点击取消时触发 */
      cancel() {
        this.dialogVisible = false;
        (this.exApl1 = []),
          (this.exApl=""),
          (this.exAplNumber = 0),
          (this.exAdu = ""),
          (this.exMoney = ""),
          (this.exStu = ""),
          (this.exType = ""),
          (this.exComm = ""),
          (this.editForm.expense_id = ""),
          (this.pId = ""),
          (this.exCreatedUser = ""),
          (this.exUser = ""),
          (this.exCause = ""),
          (this.eatMoney = ""),
          (this.trafficMoney = ""),
          (this.extraMoney = ""),
          (this.elseMoney = "");
      },
      resetPage() {
        location.reload();
      },
      /* 窗口关闭时回调 */
      handleClose(done) {
        console.log(this.exApl)
        this.dialogVisible = false;
//         (this.exApl = "");
           (this.exApl1=[]),
          (this.exAplNumber = 0),
          (this.exAdu = ""),
          (this.exMoney = ""),
          (this.exStu = ""),
          (this.exType = ""),
          (this.exComm = ""),
          (this.editForm.expense_id = ""),
          (this.pId = ""),
          (this.exCreatedUser = ""),
          (this.exUser = ""),
          (this.exCause = ""),
          (this.eatMoney = ""),
          (this.trafficMoney = ""),
          (this.extraMoney = ""),
          (this.elseMoney = "");
      },
      /* 编辑弹窗回显数据 */
      /* 获取表格行ID */
      prepareEdit(index, row) {
        this.auditstatu = row.audit_status;
        this.dialogVisible = true;
        this.editForm = Object.assign({}, row);
        var _this = this;
        this.postRequest("/expense/getById", {
          expense_id: row.expense_id
        }).then(resp => {
          if (resp && resp.status == 200) {
            var dialogEditData = resp.data;
            (this.exApl = dialogEditData[0].application_id),
              (this.exAdu = dialogEditData[0].auditor),
              (this.exStu = dialogEditData[0].expense_status),
              (this.exType = dialogEditData[0].expense_type),
              (this.exComm = dialogEditData[0].audit_comments),
              (this.pId = dialogEditData[0].project_id+''),
              (this.exCause = dialogEditData[0].expense_cause),
              (this.exUser = dialogEditData[0].user_relate),
              (this.exCreatedUser = dialogEditData[0].create_user),
              (this.eatMoney = dialogEditData[0].eatMoney),
              (this.trafficMoney = dialogEditData[0].trafficMoney),
              (this.extraMoney = dialogEditData[0].extraMoney),
              (this.userName = dialogEditData[0].username),
              (this.elseMoney = dialogEditData[0].elseMoney),
              this.date_type = row.date_type+''

          }
        });
      },

      /* 编辑表格该列数据 */
      handleEdit() {
        var _this = this;
        this.dialogVisible = true;
        if (
          this.trafficMoney === 0 &&
          this.eatMoney === 0 &&
          this.elseMoney === 0 &&
          this.extraMoney === 0
        ) {
          this.$message.warning("报销金额不能全部为空!");
          return;
        }
        if (!this.isNotNullORBlank(this.userName)) {
          this.$message.warning("制表人不能为空!");
          return;
        }
        if(this.auditstatu==2){
            this.auditstatu=3
        }
        this.postRequest("/expense/manage/editex", {
          application_id: this.exApl,
          /* auditor: this.exAdu, */
          /* expense_status :this.exStu, */
          expense_type: this.exType,
          /*  audit_comments:this.exComm, */
          project_id: this.pId,
          expense_id: this.editForm.expense_id,
          expense_cause: this.exCause,
          user_relate: this.exUser,
          create_user: this.$store.state.user.id,
          eatMoney: this.eatMoney,
          trafficMoney: this.trafficMoney,
          extraMoney: this.extraMoney,
          elseMoney: this.elseMoney,
          date_type:this.date_type,
          audit_status:this.auditstatu
        }).then(resp => {
          if (resp && resp.status == 200) {
            var respData = resp.data;
            _this.$message({type: respData.status, message: "更新成功!"});
            this.loadTableData();
            _this.dialogVisible=false
          }
        });
      },
      /* 删除行数据 */
      deleteEx(index, row) {
        var _this = this;
        this.$confirm(
          "删除[" + row.username + "]的报销单, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            _this.doDelete(row.expense_id);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      /* 删除 */
      doDelete(ids) {
        var _this = this;
        _this.loading = true;
        var url = "/expense/manage/del/";
        this.deleteRequest(url + ids).then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            this.$message({
              type: "info",
              message: "成功删除"
            });
            this.loadTableData();
            this.loadDialogApplicationIdData();
          }
        });
      },
      /* 批量删除 */
      deleteMany() {
        var _this = this;
        this.$confirm(
          "删除" + this.multipleSelection.length + "条数据, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            var multipleSelection = _this.multipleSelection;
            var ids = "";
            multipleSelection.forEach(row => {
              ids = ids + row.expense_id + ",";
            });
            _this.doDelete(ids);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      /* 导出当前页为Excel */
      handleDownload() {
        if(!this.things){
          this.$message({
            type:'warn',
            message:'请先填写加班事由'
          });
          return;
        }
        if(this.expense_ids.length == 0){
          this.$message({
                type:'warn',
                message:'请先选择报销单'
          });
          return;
        }
        var url = "/exportExpenseExcel?expense_ids="+this.expense_ids+"&cause="+this.things;
        window.location.href = url;
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      //显示导出弹窗
      handleDownload1() {
        this.dialogVisible1 = true;
      },
      //显示导出弹窗
      changTime() {
        if (this.overtime_all_time == "") {
        } else {
          this.starttime = this.createdTimeFormart(this.overtime_all_time[0]);
          this.endtime = this.createdTimeFormart(this.overtime_all_time[1]);
        }
      },
      createdTimeFormart(time) {
        let date = new Date(Date.parse(time));
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return y + "-" + m + "-" + d;
      },
      createdTimeFormart1(time) {
        let date = time;
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return y + "-" + m + "-" + d;
      },
      createdTimeFormart2(time) {
        let date = time;
        let y = date.getFullYear();
        let m = date.getMonth();
        m = m < 10 ? "0" + m : m;
        let d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return y + "-" + m + "-" + d;
      },
      depnoChange(vid) {
        if (vid) {
          this.depno1 = this.depno;
          let obj = {};
          obj = this.deptNameData.find(item => {
            return item.id == vid;
          });
          this.deptName = obj.name;
          let _this = this;
          this.postRequest("/expense/getProjectData", {
            depno: this.depno
          }).then(resp => {
            if (resp && resp.status == 200) {
              _this.projectData = resp.data;
              _this.project_id = _this.projectData[0].project_id;
              _this.projectNumber = _this.projectData[0].project_number
            }
          });
        } else {
          this.projectData = [];
        }
      },
      projectChange(vid) {
        if (vid) {
          let obj = {};
          obj = this.projectData.find(item => {
            return item.project_number == vid;
          });
          this.projectName = obj.project_name;
          this.projectNumber = vid;
          this.project_id = obj.project_id;
        } else {
          this.projectName = "";
          this.projectNumber = "";
          this.project_id="";
        }
        this.loadTableData() ;
      },
      //关闭新增报销单触发事件
      closeDialog(){
        this.cancel();
      },
      //审核状态转码
      fnMatterAuditStatus(row,column){
          var str = "";
          switch (row.audit_status){
            case 1:
                str="已审核";
                break;
            case 2:
                str="已打回";
                break;
            case 0:
                str="未审核";
                break;
            case 3:
                str = "打回已修改"
                break;
            default:
                break;
          }
          return str;
      },
      //职位选择改变事件
      positionChange(vid){
//          console.log(vid)
        this.positionid=vid;
        this.loadTableData()
      },
    },

    watch: {
      exApl: function (value, oldValue) {
        //根据下拉框选择申请表相关 重置项目与相关人员数据 与申请表、结果表关联
        if (!value == "") {
          if (!oldValue == "") {
            this.pId = "";
            this.exUser = "";
          }
        }
      },

    }
  };
</script>

<style lang="css" scoped>
  .table-form-input {
    border: 1px solid white;
    outline: medium;
    border-radius: 0px;
  }

  .table1 {
    border: 1px solid rgb(155, 154, 154);
    margin: auto;
    text-align: center;
    border-radius: 5px;
  }

  .td1 {
    border: 1px solid rgb(155, 154, 154);
    height: 30px;
    width: 100px;
  }

  .tr1 {
    border: 1px solid rgb(155, 154, 154);
  }

  table tr:nth-child(odd) {
    background: #fff;
  }

  table tr:nth-child(even) {
    background: #f5fafa;
  }

  .title {
    position: relative;
    margin-left: 55px;
    margin-top: -97px;
    width: 173px;
    height: 37px;
    box-sizing: border-box;
    border: 1px solid rgb(224, 223, 223);
    background-color: white;
    line-height: 120px;
    text-indent: 5px;
    background: linear-gradient(
      19deg,
      transparent 49.5%,
      rgb(155, 154, 154) 49.5%,
      rgb(155, 154, 154) 50.5%,
      transparent 50.5%
    );
  }

  .title::before {
    content: "";
    position: absolute;
    /* left:-30px; */
    top: -30px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(155, 154, 154);
    transform-origin: bottom center;
    transform: rotateZ(45deg) scale(0.48);
    animation: slash 1s infinite ease;
  }

  @keyframes slash {
    100% {
      transform: rotateZ(45deg) scale(0.48);
    }
  }
</style>




